import {FC,useCallback,useMemo,useState} from 'react'


const UseMomeCom:FC<any> = () => {
    let [count,setCount] = useState<number>(1)
    let [flag,setFlag] = useState<boolean>(false)

    let handleClick1 = () => {
        setCount(count+1)
    }
    let handleClick2 = () => {
        setFlag(!flag)
    }

    // useMemo可以根据第二个参数来觉得是否重新执行，依赖不变化的时候会缓存结果
    // 计算属性返回的时结果，缓存的是结果
    let num = useMemo<number>(() => {
        // console.log(count);
        
        return count + 20
    },[count])
    
    // useCallback 也是计算属性，缓存的是函数
    let cb = useCallback(()=>{
        return flag+""
    },[flag])
    // console.log(cb);
    
    
    return(
        <fieldset>
            <legend>计算属性</legend>
            <h1>{count}</h1>
            <h1>num:{num}</h1>
            <h1>cb:{cb()}</h1>
            <button onClick={handleClick1}>点击变更count</button>
            <button onClick={handleClick2}>点击变更flag</button>
        </fieldset>
    )
}
export default UseMomeCom